<template>
	<view class="page">
		<view class="bg-white">
			<SimpleTabs :list="tabs" :current="currentTab" @change="handleChange"></SimpleTabs>
		</view>
		<view class="main">
			<template v-if="currentTab == 0">
				<view class="bg-white" style="border-bottom:solid 1px #eee" v-for="item in 2" :key="item">
					<view class="student-item" @click="toReviewStudentDetail(item)">
						<view>
							<u-avatar :src="`https://picsum.photos/200/300?random=${item}`" size="120rpx"></u-avatar>
						</view>
						<view class="flex-1">
							<u-text bold size="36rpx" color="#333" text="张三"></u-text>
							<u-text margin="10rpx 0 0 0" size="24rpx" color="#999" text="加入班级：托班：一年级（A）班"></u-text>
						</view>
					</view>
					<view class="flex align-end justify-end" v-if="role === 'principal'">
						<view class="flex gap padding-bottom padding-lr">
							<u-button customStyle="width:120rpx;" shape="circle" size="small" type="error" text="拒绝"
								@click.prevent.stop="toRejectStudent(item)"></u-button>
							<u-button customStyle="width:120rpx;" shape="circle" size="small" type="primary" text="同意"
								@click.prevent.stop="toAcceptStudent(item)"></u-button>
						</view>
					</view>
				</view>
			</template>
			<template v-if="currentTab == 1">
				<view class="flex align-center gap margin-tb-lg margin-lr" v-for="item in 2" :key="item"
					@click="toReviewStudentDetail(item)">
					<view>
						<u-avatar :src="`https://picsum.photos/200/300?random=${item}`" size="120rpx"></u-avatar>
					</view>
					<view class="flex-1">
						<u-text bold size="36rpx" color="#333" text="张三"></u-text>
						<u-text margin="10rpx 0 0 0" size="24rpx" color="#999" text="加入班级：托班：一年级（A）班"></u-text>
					</view>
					<view>
						<image src="/static/image/teacher/img-student-pass.png" mode="widthFix" style="width: 98rpx;height: 98rpx;"
							v-if="item == 1">
						</image>
						<image src="/static/image/teacher/img-student-reject.png" mode="widthFix"
							style="width: 98rpx;height: 98rpx;" v-if="item == 2">
						</image>
					</view>
				</view>
			</template>

			<u-modal title="拒绝理由" confirmColor="#0060E6" :show="showRejectModal" :closeOnClickOverlay="true"
				:showCancelButton="true" @close="showRejectModal = false" @confirm="handleConfirm"
				@cancel="showRejectModal = false">
				<view style="width:100%">
					<u-textarea v-model="rejectReason" placeholder="请输入拒绝理由" />
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import SimpleTabs from '@/components/SimpleTabs/index.vue';
import { onLoad } from '@dcloudio/uni-app';

// tab index
const currentTab = ref(0)
// 角色
const role = ref('principal');
// 显示拒绝模态框
const showRejectModal = ref(false);
// 拒绝理由
const rejectReason = ref('');
const tabs = ref([
	{
		name: '待审核',
		value: '待审核'
	},
	{
		name: '已审核',
		value: '已审核'
	}
])

// 切换tab
const handleChange = (index) => {
	console.log(index)
	currentTab.value = index.index
}

// 查看详情
const toReviewStudentDetail = (item) => {
	uni.navigateTo({
		url: '/pages/common/reviewStudent/detail?id=' + item
	});
}

// 拒绝学员
const toRejectStudent = (item) => {
	console.log(item)
	showRejectModal.value = true;
};

// 确认拒绝
const handleConfirm = () => {
	console.log(rejectReason.value)
	showRejectModal.value = false;
}

// 同意学员
const toAcceptStudent = (item) => {
	console.log(item)
}

onLoad(() => {
	role.value = uni.getStorageSync('role');
	console.log('role', role.value)
})
</script>

<style lang="scss" scoped>
.student-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	box-sizing: border-box;
	background: white;
	gap: 20rpx;
}
</style>
